<template>
	<view>
		<!-- 搜索 -->
		<view style="height: 88rpx;line-height: 88rpx;text-align:center;">搜索区域</view>
		<!-- 分类 -->
		<view class="category">
			<!-- 顶级分类 -->
			<view class="sup">
				<scroll-view scroll-y>
					<text :class="{ active: activeIndex === index }" v-for="(item, index) in list" :key="item.cat_id"
						@click="activeIndex = index">{{ item.cat_name }}</text>
				</scroll-view>
			</view>
			<!-- 子级分类 -->
			<view class="sub">
				<scroll-view scroll-y>
					<!-- 封面图 -->
					<image src="http://static.botue.com/ugo/uploads/category.png" class="thumb"></image>
					<view class="children" v-for="item in subList" :key="item.cat_id">
						<view class="title">{{ item.cat_name }}</view>
						<!-- 品牌 -->
						<view class="brands">
							<navigator :url="`/subpkg/pages/list/index?name=${brand.cat_name}`"
								v-for="brand in item.children" :key="brand.cat_id">
								<image :src="brand.cat_icon"></image>
								<text>{{ brand.cat_name }}</text>
							</navigator>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 分类数据
				list: [],
				// 当前高亮的下标
				activeIndex: 0
			}
		},
		onLoad() {
			this.getCategoryList()
		},
		methods: {
			// 获取分类数据
			async getCategoryList() {
				const res = await uni.$http.get("/api/public/v1/categories")
				// console.log(res);
				this.list = res.data.message
			}
		},
		computed: {
			// 二级分类数据
			subList() {
				if (this.list[this.activeIndex]) {
					return this.list[this.activeIndex].children
				}
				return []
			}
		}
	}
</script>

<style scoped lang="scss">
	scroll-view {
		height: 100%;
	}

	.category {
		display: flex;
		width: 100%;
		position: absolute;
		top: 100rpx;
		bottom: 0;

		.sup {
			width: 196rpx;
			background-color: #f4f4f4;

			text {
				display: block;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 27rpx;
				color: #333;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: none;
				}

				&.active {
					background-color: #FFF;
					color: #ea4451;
					position: relative;

					&::before {
						content: '';
						display: block;
						width: 8rpx;
						height: 60rpx;
						transform: translateY(-50%);
						background-color: #ea4451;

						position: absolute;
						left: 0;
						top: 50%;
					}
				}
			}
		}

		.sub {
			flex: 1;
			padding: 20rpx 18rpx;

			.thumb {
				width: 100%;
				height: 180rpx;
			}

			.children {
				text-align: center;
				color: #333;

				.title {
					display: inline-block;
					margin: 40rpx 0 20rpx;
					font-size: 30rpx;

					&::before {
						content: '/';
						margin-right: 20rpx;
						color: #666;
					}

					&::after {
						content: '/';
						margin-left: 20rpx;
						color: #666;
					}
				}
			}

			.brands {
				display: flex;
				flex-wrap: wrap;

				navigator {
					width: 33%;
					margin-bottom: 20rpx;
				}

				image {
					width: 120rpx;
					height: 120rpx;
				}

				text {
					display: block;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
